<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员信息</title>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/font-awesome.css" rel="stylesheet">
    <link href="../css/custom-styles.css" rel="stylesheet">
    <link href="../css/element/index.css" rel="stylesheet">
    <style>
        [v-cloak]{
        display:none;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <div class="row">
        <div class="col-md-12" style="height: 60px;">
            <nav class="navbar navbar-default top-navbar">
                <div class="row">
                    <div class="col-md-2">
                        <a class="navbar-brand" style="width: 100%;background-color: darkslateblue" href="index.html">
                            <strong style="font-size: 20px;">电影订票购票系统</strong>
                        </a >
                    </div>
                    <div class="col-md-10">
                        <div class="navbar-header">
                            <a href="/front/index.html" style="color: white;line-height: 60px;font-size: 16px;margin-left: 30px">
                                <i class="fa fa-desktop"></i>
                            </a >
                        </div>
                        <ul class="nav navbar-top-links navbar-right">
                            <li style="color:white">欢迎您,{{user.name}}</li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-user fa-fw"></i>
                                    <i class="fa fa-caret-down"></i>
                                </a >
                                <ul class="dropdown-menu dropdown-user">
                                    <li>
                                        <a href="javascript:void(0)" @click="personalPage">
                                            <i class="fa fa-user fa-fw"></i>个人信息
                                        </a >


                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="javascript:void(0)" @click="logout">
                                            <i class="fa fa-sign-out fa-fw"></i>退出
                                        </a >
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <nav id="nav-id" class="navbar-default navbar-side">
                <div class="sidebar-collapse">
                    <ul class="nav" id="main-menu">
                        <li>
                            <a href="index.html" > <i class="fa fa-dashboard"></i>首页</a>
                        </li>
                        <li>
                            <a href="#"> <i class="fa fa-sitemap"></i>信息管理<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse in">
                                <li v-if="authority.indexOf(1) !== -1">
                                    <a href="adminInfo.html" class="active-menu"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">管理员信息</span></a>
                                </li>
                                <li v-if="authority.indexOf(3) !== -1">
                                    <a href="userInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">用户信息</span></a>
                                </li>
                                <li v-if="authority.indexOf(4) != -1">
                                    <a href="messageInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">在线交流信息</span></a>
                                </li>
                                <li v-if="authority.indexOf(1000001) != -1">
                                    <a href="advertiserInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">公告信息</span></a>
                                </li>
                                <li v-if="authority.indexOf(1000003) != -1">
                                    <a href="linkInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">友情链接</span></a>
                                </li>
                                <li v-if="authority.indexOf(1000015) != -1">
                                    <a href="goodsInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">电影详情信息</span></a>
                                </li>
                                <li v-if="authority.indexOf(1000016) != -1">
                                    <a href="cartInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">收藏栏信息</span></a>
                                </li>
                                <li v-if="authority.indexOf(1000017) != -1">
                                    <a href="orderInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">订单信息</span></a>
                                </li>
                                <li v-if="authority.indexOf(1000018) != -1">
                                    <a href="commentInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">评价信息</span></a>
                                </li>
                                <li v-if="authority.indexOf(1000014) != -1">
                                    <a href="typeInfo.html"> <i class="fa fa-table sub-icon-mg"></i><span class="mini-sub-pro">电影类型信息</span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" @click="personalPage">
                                        <i class="fa fa-user"></i>个人信息
                                    </a >
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="updataPassword.html"> <i class="fa fa-unlock-alt"></i>修改密码</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="col-md-10" style="background-color: #e6e6e6">
            <div id="page-wrapper">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header"><small>管理员信息</small></h1>
                    </div>
                </div>
                <div class="row">
                    <div class="panel-default" style="background-color: whitesmoke">
                        <div class="panel-body">
                            <div class="table-responsive">
                                <div class="nx-table-header">
                                    <button class="btn btn-sm btn-primary" v-on:click="add()">新增</button>
                                    <input type="text" placeholder="请输入搜索内容" v-model="name" @keyup.enter="loadTable(1)">
                                    <i class="glyphicon glyphicon-search"></i>
                                </div>
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>姓名</th>
                                            <th>昵称</th>
                                            <th>性别</th>
                                            <th>年龄</th>
                                            <th>生日</th>
                                            <th>手机号</th>
                                            <th>邮编</th>
                                            <th>电子邮箱</th>
                                            <th>身份证</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody v-for="obj in objs">
                                        <tr>
                                            <td>{{obj.id}}</td>
                                            <td>{{obj.name}}</td>
                                            <td>{{obj.nickName}}</td>
                                            <td>{{obj.sex}}</td>
                                            <td>{{obj.age}}</td>
                                            <td>{{obj.birthday}}</td>
                                            <td>{{obj.phone}}</td>
                                            <td>{{obj.address}}</td>
                                            <td>{{obj.code}}</td>
                                            <td>{{obj.email}}</td>
                                            <td>{{obj.cardId}}</td>
                                            <td>
                                                <button class="btn btn-primary btn-xs" v-on:click="init(obj)">编辑</button>
                                                <button class="btn btn-danger btn-xs" v-on:click="del(obj.id)">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item" v-bind:class="{disabled:preActive}">
                                            <a class="page-link" href="javascript:void(0)" v-on:click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                        </li>
                                        <li class="page-item" v-bind:class="{disabled:preActive}">
                                            <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1"
                                               v-on:click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                        </li>
                                        <li class="page-item disabled">
                                            <a class="page-link" href="javascript:void(0)" >{{pageInfo.pageNum}}</a>
                                        </li>

                                        <li class="page-item">
                                            <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage"
                                               v-on:click="loadTable(pageInfo.hasNextPage?(pageInfo.pageNum + 1):pageInfo.pageNum)">{{pageInfo.pageNum + 1}}</a>
                                        </li>
                                        <li class="page-item" v-bind:class="{disabled:nextActive}">
                                            <a class="page-link" href="javascript:void(0)"
                                               v-on:click="loadTable(pageInfo.hasNextPage?(pageInfo.pageNum + 1):pageInfo.pageNum)">下一页</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--模态框（Modal）-->
    <div class="modal" tabindex="-1" id="mod">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">请填写信息</span>
                    <button type="button" class="close" data-dismiss="modal" @click="entity={sex:'男'}">&times;</button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" id="id" name="id" v-model="entity.id">
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">姓名</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.name" placeholder="请输入姓名" id="name">
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">昵称</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.nickName" placeholder="请输入昵称" id="nickName">
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">性别</label>
                            <div class="col-sm-7">
                                <label class="radio-inline">
                                    <input type="radio" value="男" v-model="entity.sex">男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" value="女" v-model="entity.sex">女
                                </label>
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">年龄</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.age" placeholder="请输入年龄" id="age">
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">生日</label>
                            <div class="col-sm-7">
                                <el-data-picker v-model="entity.birthday" id="birthday" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" ></el-data-picker>
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">手机号</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.phone" placeholder="请输入手机号" id="phone">
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">地址</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.address" placeholder="请输入地址" id="address">
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">邮政编码</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.code" placeholder="请输入邮政编码" id="code">
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">电子邮箱</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.email" placeholder="请输入电子邮箱" id="email">
                            </div>
                        </div>
                        <div  class="form-group">
                            <label class="col-sm-3 control-label">身份证</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.cardId" placeholder="请输入身份证" id="cardId">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="entity={sex:'男'}">关闭</button>
                    <button type="button" class="btn btn-primary" v-on:click="update()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.metisMenu.js"></script>
<script src="../js/custom-scripts.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/element/index.js"></script>
<script>
    function msg(type,msg) {
        Vue.prototype.$message({
            type: type,      //success(成功),warning(警告),error(错误)
            message: msg,
            duration: 2000,
            offset: 100,
            center: true
        });
    }
    new Vue({
      el: "#wrapper",
      data: {
        user: {},
        authority:[],
        permission: [],
        name: '',
        objs: [],
        pageInfo: {},
        preActive: true,  // 上一页是否可点击
        nextActive: true,  // 下一页是否可点击
        entity: {
            sex: '男'
        }
      },
      created: function () {
        this.user = JSON.parse(localStorage.getItem('user'));
        axios.get("/permission/1").then(res => {
            if (res.data.code === '0') {
                this.permission = res.data.data;
            } else {
                msg('error', res.data.msg);
            }
        });

        this.loadTable(1);
      },
        method:{
          //分页查询
            loadTable(pageNum){
                let  name = this.name === ''?'all':this.name;
                axios.get("/adminInfo/page/"+name+"?pageNum="+pageNum).then(res => {
                    if(res.data.code === '0'){
                        this.objs = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    }else{
                        msg('error',res.data.msg);
                    }
                });
            },

            //弹出新增一条数据的模态框
            add(){
                if(this.permission.indexOf(1) === -1){
                    msg('warning','你没有权限操作');
                    retrun;
                }
                this.entity = {sex: '男'};
                $("#mod").modal('show');
            },
            //弹出编辑一条数据的模态框
            init(o){
                if(this.permission.indexOf(3) === -1){
                    msg('warning','你没有权限操作');
                    retrun;
                }
                this.entity = JSON.parse(JSON.stringify(o));
                $("#mod").modal('show');
            },
            //根据主键ID删除一条数据
            del(id){
                if(this.permission.indexOf(2) === -1){
                    msg('warning','你没有权限操作');
                    retrun;
                }
                let _this = this;
                this.$confirm('确认删除？','系统提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                        axios.delete("/adminInfo"+id).then(res => {
                            if(res.data.code === '0'){
                                msg('success','删除成功');
                                $('#mod').model('hide');
                                _this.loadTable(1);
                            }else{
                                msg('error',res.data.msg);
                            }
                        })
                    })
                },
            //更新一条数据
            update(){
                if(checkVallid(this.entity)){
                    if(!this.entity.id){         //新增保存
                        axios.post("/adminInfo",this.entity).then(res => {
                            if(res.data.code === '0'){
                                msg('success','添加成功');
                                $('#mod').model('hide');
                                this.loadTable(1);
                            }else{
                                msg('error',res.data.msg);
                            }
                        })
                    }else {
                        axios.put("/adminInfo", this.entity).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '更新成功');
                                $('#mod').model('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    }
                }
            },

        },
    });
</script>
</body>
</html>